<template>
	<view class="unt-goods-detail unt-goods-detail-contanier">
		<view class="shop-list-content" v-if="modal=='detail'">
			<view class="item flex-start" v-for="(item,index) in data" :key="index">
				<view class="item-image">
					<image class="image" :src="item.goods.image.url" mode="aspectFill"></image>
				</view>
				<view class="item-content">
					<view class="item-title">{{item.goods.goodsName}}</view>
					<view v-if="item.goodsSku!=null">
						<view class="specs" v-for="(iv,ind) in goodsSkuProps(item,item.goodsSku.goodsProps)" :key="ind">
							{{iv}}</view>
					</view>
					<view class="num"><text>*{{item.goodsNum}}</text><text class="price">¥{{goodsSkuPrice(item)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-goods-list-content" v-else-if="modal=='order'">
			<view class="item flex-sb" v-for="(item,index) in data" :key="index">
				<view class="item-image">
					<image class="image" :src="item.goods.image.url" mode="aspectFill"></image>
				</view>
				<view class="item-title-price-specs">
					<view class="title-price flex-sb">
						<text class="title">{{item.goodsName}}</text>
						<view class="price">¥<text class="price-num">{{item.goodsPrice}}</text></view>
					</view>
					<view v-if="item.goodsSkuId!=null&&item.goodsSkuId !==''">
						<view class="specs" v-for="(iv,ind) in goodsSkuProps(item,item.goodsProps)" :key="ind">{{iv}}
						</view>
					</view>
					<view class="num">*{{item.totalNum}}</view>
				</view>
			</view>
		</view>
		<view class="order-goods-list-content" v-else-if="modal=='refund'">
			<view class="item flex-sb" v-for="(item,index) in data" :key="index">
				<view class="item-image">
					<image class="image" :src="item.goods.image.url" mode="aspectFill"></image>
				</view>
				<view class="item-title-price-specs">
					<view class="title-price flex-sb">
						<text class="title">{{item.goodsName}}</text>
					</view>
					<view v-if="item.goodsSkuId!=null&&item.goodsSkuId !==''">
						<view class="specs" v-for="(iv,ind) in goodsSkuProps(item,item.goodsProps)" :key="ind">{{iv}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import prop from "./props.js"
	export default {
		name: "unt-goods-detail",
		mixins: [prop],
		computed: {
			//规格获取
			goodsSkuProps() {
				return function(val, Props) {
					if (val.goodsSku !== null && val.goodsSku !== '') {
						const name = JSON.parse(Props).map((prop) => prop.value.name);
						return name;
					} else {
						return 1;
					}
				}
			},
			//价格获取
			goodsSkuPrice() {
				return function(val) {
					if (val.goodsSku !== null && val.goodsSku !== '') {
						return val.goodsSku.goodsPrice.toFixed(2);
					} else {
						return val.goods.goodsPriceMin.toFixed(2);
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.unt-goods-detail-contanier {
		.shop-list-content {
			max-width: 100%;
			overflow-x: auto;
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 100%;
				padding: 20rpx;
				margin-bottom: 16rpx;
				align-items: flex-start;
				border-bottom: 1px solid #f5f5f5;

				.item-image {
					margin: 0rpx 10rpx;
					width: 200rpx;
					height: 200rpx;
					flex-shrink: 0;
					border: 1px solid #f5f5f5;
					border-radius: 5rpx;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.item-content {
					width: 100%;
					min-height: 100px;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.item-title {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
					}

					.specs {
						display: inline-block;
						border-radius: 10rpx;
						margin: 16rpx 0px;
						padding: 4rpx 10rpx;
						font-size: 24rpx;
						background-color: #F3F3F5;
						margin-right: 15rpx;
					}

					.num {
						font-size: 26rpx;
						color: #999;
						display: flex;
						justify-content: space-between;

						.price {
							color: #FC483C;
							font-size: 28rpx;
						}
					}

				}
			}
		}

		.order-goods-list-content {
			.item {
				align-items: flex-start;
				margin-bottom: 20rpx;

				.item-image {
					margin: 0rpx 10rpx;
					width: 200rpx;
					height: 200rpx;
					flex-shrink: 0;

					.image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}

				.item-title-price-specs {
					.title-price {
						align-items: flex-start;
						font-size: 28rpx;

						.price {
							padding: 0px 15rpx;

							.price-num {
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}

					.specs {
						display: inline-block;
						border-radius: 10rpx;
						margin: 16rpx 0px;
						padding: 4rpx 10rpx;
						font-size: 24rpx;
						background-color: #F3F3F5;
						margin-right: 15rpx;
					}
				}
				.num {
					font-size: 26rpx;
					color: #999;
					display: flex;
					justify-content: space-between;
				}
			}

			.item:last-child {
				margin-bottom: 0px;
			}
		}
	}
</style>